<section class="wrapper">
  <div class="row">
    <div class="col-lg-12">
      <section class="panel">
        <header class="panel-heading">
          <button class="btn btn-info">Fairy Lights Battery Operated</button>
        </header>
        <div class="panel-body">
          <table class="table table-bordered table-striped" id="example">
            <thead>
              <tr>
                <th class="text-center">Store</th>
                <th class="text-center">Main Image</th>
                <th class="text-center">Category</th>
                <th class="text-center">Release</th>
                <th class="text-center">ASIN</th>
                <th class="text-center">Price</th>
                <th class="text-center">Rank</th>
                <th class="text-center">Review</th>
                <th class="text-center">ReviewMeta</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of GroupList;">
                <td class="text-center" style="line-height: 72px;">{{item.store}}</td>
                <td class="text-center">
                  <img src="{{item.imageUrls}}" alt="amazon images">
                </td>
                <td class="text-center" style="line-height: 72px;">{{item.category}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.Release_Date}}</td>
                <td class="text-center" style="line-height: 72px;">
                    <a href="https://www.amazon.com/dp/{{item.asin}}?psc=1" target="_blank">
                      {{item.asin}}
                    </a>
                </td>
                <td class="text-center" style="line-height: 72px;">{{item.price}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.rank}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.review}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.review_meta}}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th class="text-center">Store</th>
                <th class="text-center">Main Image</th>
                <th class="text-center">Category</th>
                <th class="text-center">Release</th>
                <th class="text-center">ASIN</th>
                <th class="text-center">Price</th>
                <th class="text-center">Rank</th>
                <th class="text-center">Review</th>
                <th class="text-center">ReviewMeta</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </section>
    </div>
  </div>
  <div class="row">
    <div class="panel-heading">
      <h4 class="text-left">Fairy Lights Battery Operated</h4>
    </div>
    <div class="panel-body">
      <label class="pull-left">Rank/Price</label><br/>
      <app-navigate-bar></app-navigate-bar>
      <div style="height: 15px;"></div>
      <div class="container">
        <div class="dropdown pull-left">
          <select class="custom-select btn btn-info">
            <option selected>Action</option>
            <option value="">Ranks</option>
            <option value="">Prices</option>
            <option value="">Review And Count</option>
          </select>
        </div>
        <div class="dropdown pull-right">
          <select class="custom-select btn btn-info">
            <option selected>Action</option>
            <option value="">Ranks</option>
            <option value="">Prices</option>
            <option value="">Review And Count</option>
          </select>
        </div>
        <!-- <app-group-line></app-group-line> -->
        <app-cumulative-line-chart></app-cumulative-line-chart>
      </div>

      <div class="row">
        <div class="panel-heading">
          <button class="btn btn-info" (click)="addNote()">+ Add New Note</button>
        </div>
        <div class="col-lg-12">
          <table class="table table-responsive table-striped">
            <thead class="thead-inverse">
              <tr>
                <th class="text-center">Index</th>
                <th class="text-center">Create Date</th>
                <th class="text-center">Content</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of NoteList">
                <td class="text-center">{{item.id}}</td>
                <td class="text-center">{{item.create_data}}</td>
                <td class="text-center">{{item.content}}</td>
                <td class="text-center">
                  <i id="fa-time" style="cursor: pointer;" class="fa fa-times" aria-hidden=""></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

